<%@ tag language="java" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="s"%>
<%@ attribute name="headPart" fragment="true"%>
<%@ attribute name="pageName" required="false"%>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="<c:url value="/resources/bootstrap/css/bootstrap.css" />" rel="stylesheet">
	<link href="<c:url value="/resources/css/common.css" />" rel="stylesheet">
	
	<script src="<c:url value="/resources/jquery/jquery-2.1.1.min.js" />"></script>
    <script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js" />"></script>
	<script type="text/javascript">
    	function changePwd(){
    		var pwd = $("#pwd").val();
    		if(!pwd){
    			alert("Password cannot be emply");
    		}
    		var pwd1 = $("#pwd1").val();
    		if(!pwd1){
    			alert("Password again cannot be emply");
    		}
    		if(pwd != pwd1){
    			alert("The two inputs must be the same");
    		}
    		$.post("<c:url value="/changePwd"/>", {pwd: pwd}, function(){
    			$("#myModal").modal("hide");
    			$("#pwd").val('');
    			$("#pwd1").val('');
    		});
    	}
    </script>
	<jsp:invoke fragment="headPart"></jsp:invoke>
	<title>查车信息</title>
</head>
<body>
	<!-- top -->
  	 <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
        	<div class="sitename">
        		<div>查车信息网</div>
        		<div class="domain">chachexinxi.cn</div>
        	</div>
        </div>
        <!-- Note that the .navbar-collapse and .collapse classes have been removed from the #navbar -->
        <div id="navbar">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Price <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li <c:if test="${pageName eq 'che168_price'}">class="active"</c:if>><a href="<c:url value="/price/index"/>">Price Caculator(Che168)</a></li>
                <li <c:if test="${pageName eq 'ganji_price'}">class="active"</c:if>><a href="<c:url value="/price2/index"/>">Price Caculator(Ganji)</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Image <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li <c:if test="${pageName eq 'img'}">class="active"</c:if>><a href="<c:url value="/img/index"/>">Image Search</a></li>
                <li <c:if test="${pageName eq 'img_map'}">class="active"</c:if>><a href="<c:url value="/map/img"/>">Brand/Model Mapping</a></li>
              </ul>
            </li>
            <li <c:if test="${pageName eq 'account'}">class="active"</c:if>>
	          	<a href="<c:url value='/account/index.html'/>"><span class="glyphicon glyphicon-user menu-item-icon"></span>Account</a>
	        </li>
          </ul>
          
	        <ul class="nav navbar-nav navbar-right">
				<li role="presentation" class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
				    	<span class="glyphicon glyphicon-th menu-item-icon"></span>${currentUser}<span class="caret"></span>
				    </a>
				    <ul class="dropdown-menu" role="menu">
						<li><a href="#" data-toggle="modal" data-target="#myModal">Change Password</a></li>
			            <li><a href="<c:url value="/logout"/>">Logout</a></li>
				    </ul>
			    </li>
	        </ul>
        </div>
      </div>
    </nav>
	<!-- main -->
	<div class="container">
		<jsp:doBody />
	</div>


	<!-- dialog -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">
	                  &times;
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               	Change Password
	            </h4>
	         </div>
	         <div class="modal-body form-horizontal">
	          		<div class="form-group">
		          		<label for="pwd" class="control-label col-sm-4">New Password</label>
		          		<div class="col-sm-4">
				        	<input id="pwd" class="form-control" type="text" name="pwd"/>
				        </div>
	          		</div>
	          		<div class="form-group">
		          		<label for="pwd1" class="control-label col-sm-4">New Password Again</label>
		          		<div class="col-sm-4">
				        	<input id="pwd1" class="form-control" type="text"/>
				        </div>
	          		</div>
	         </div>
	         <div class="modal-footer">
	            <button type="submit" class="btn btn-primary btn-sm" onclick="changePwd()">Submit</button>
	            <button type="button" class="btn btn-default btn-sm"
						data-dismiss="modal">Close</button>
	         </div>
	      </div>
		</div>
	</div>
</body>
</html>
